<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>

    <!-- jquery库 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!-- 自己写的css文件 -->
    <link rel="stylesheet" type="text/css" href="../css/background1.css">

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- 可选的Bootstrap主题文件（一般不使用） -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="/home">个人博客</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="/home">主页</a>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">博文<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="/writingArticle">写博文</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="/articleList">文章列表</a>
                                </li>
                            </ul>
                        </li>

                        <li>
                            <a href="#">待开发</a>
                        </li>

                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" />
                        </div> <button type="submit" class="btn btn-default">搜索（待开发）</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">链接（待开发）</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的账号<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">待开发</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="/logout">登出账号</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </nav>
        </div>
    </div>



    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="title" class="col-sm-1 control-label">题目</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="title" placeholder="请输入题目" readonly="readonly">
            </div>
        </div>
        <div class="form-group">
            <label for="author" class="col-sm-1 control-label">作者</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="author" placeholder="请输入作者" readonly="readonly">
            </div>
        </div>
        <div class="form-group">
            <label for="time" class="col-sm-1 control-label">时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="time" readonly="readonly">
            </div>
        </div>

        <div class="form-group">
            <label for="note" class="col-sm-1 control-label">备注</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="note" placeholder="请输入备注（可不填）" readonly="readonly">
            </div>
        </div>

        <div class="form-group">
            <label for="details" class="col-sm-1 control-label">文本框</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="details" rows="15" readonly="readonly"></textarea>
            </div>
        </div>


        <div class="form-group">
            <div class="col-sm-offset-10 col-sm-2">
                <button type="button" class="btn btn-default" onclick="returnHomePage()">返回</button>
            </div>
        </div>
    </form>



</div>




<!-- 自定义js执行函数 -->
<script>


    //初始化方法，这里主要用来获取方法
    $(document).ready(function (){
        var thisURL = document.URL;
        var getval =thisURL.split('?')[1];
        var id= getval.split("=")[1];

        var data = {
            //json格式
            "id":id
        };

        //JSON.stringify(data) 从data中解析出字符串
        console.log(JSON.stringify(data));

        $.ajax({
            type: "post",
            // ..代表的应该是 http://localhost:8080
            url: "../requestArticle",
            data: JSON.stringify(data),
            contentType : 'application/json;charset=utf-8',
            dataType: "json",
            async:false,

            // //key/value格式
            // data: 'username=ha&password=123',
            success: function(data){
                console.log(data)

                $("#title").val(data[0].title);
                $("#author").val(data[0].author);
                $("#note").val(data[0].note);
                $("#details").val(data[0].details);
                $("#time").val(getDate(data[0].date));

            }
        });
    });

    //时间戳转为正常显示的时间模样的操作
    function getDate(time){
        var oDate = new Date(time),
            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth()+1,
            oDay = oDate.getDate(),
            oHour = oDate.getHours(),
            oMin = oDate.getMinutes(),
            oSen = oDate.getSeconds(),
            oTime = oYear +'年'+ getzf(oMonth) +'月'+ getzf(oDay) +'日 '+ getzf(oHour) +'时'+
                getzf(oMin) +'分'+getzf(oSen) + '秒';//最后拼接时间
        return oTime;
    };
    //补0操作
    function getzf(num){
        if(parseInt(num) < 10){
            num = '0'+num;
        }
        return num;
    }


    //返回主页
    function returnHomePage(){
        window.location.href = "../home";
    }


</script>
</body>
</html>